<template>
  <div>
    <el-dialog
     :close-on-click-modal='false'
    :before-close="handleDialogClose"
      title="营业执照"
      :visible.sync="licenseVisible"
      width="40%"
      center
      >
        <div class="license_box">
          <el-upload
          ref="upload"
          :headers="{Authorization :token}"
          :data="{id:item.id}"
          :on-success="onSuccess"
          :on-error="onError"
          :show-file-list="false"
          :action="`${VUE_APP_BASE_API}/v1/backend/user/business`"
            >
            <img v-if="item.business" :src="item.business" class="avatar">
            <img v-else-if="imageUrl" :src="VUE_APP_BASE_AP+imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

        </div>
        <span slot="footer" class="dialog-footer">
          <el-row type="flex" :gutter="20">
            <el-col :lg="24">
              <div style="display: flex;justify-content: center;">
                <el-upload
                accept="image/*"
                ref="upload"
                :headers="{Authorization :token}"
                :data="{id:item.id}"
                :on-success="onSuccess"
                :on-error="onError"
                :show-file-list="false"
                :action="`${VUE_APP_BASE_API}/v1/backend/user/business`"
                  >
                  <el-button  type="button" class="pubBtn" >{{item.business?'重新上传':'立即上传'}}</el-button>
                </el-upload>
                <el-button type="button" class="pubBtn3" v-if="item.type == '1'" @click='Update' style="margin-left:40px;">升级账号</el-button>
              </div>
            </el-col>
          </el-row>
        </span>
    </el-dialog>
  </div>
</template>

<script>
  import { getToken } from '@/utils/auth'
  import {UserBusiness,UserUpdate} from "@/api/admin.js"
  import {VUE_APP_BASE_API} from "../../config.js"
 export default{
   props:["item","licenseVisible"],
   data(){
    return{
      VUE_APP_BASE_API,
      action:"a",
      imageUrl:'',
      fileList:[],
      file:"",
      uploadData:{},
      token:getToken()
    }
   },
   methods:{
    async onSuccess(response, file, fileList) {
      if(response){
        this.imageUrl =response.data.url
        this.$nextTick(()=>{
          // console.log(this.imageUrl)
          this.imageUrl =response.data.url
          this.$emit("cancle",false)
        })
        this.$message.success("上传成功");
        this.$emit("cancle",false)
      }
    },
    onError(err){
      if(err){
        this.$message.error("上传失败");
      }
    },
    async Update(){
      try {
        await UserUpdate({id:this.item.id})
        this.$message.success("升级成功");
        this.$emit("cancle",false)
      } catch(e){
        this.$message.error("升级失败");
        this.$emit("cancle",false)
      }
    },
    handleDialogClose() {
      this.$emit("cancle", false);
    }
   }
 }
</script>

<style scoped lang="less">
  .license_box{
    width:590px;
    height:377px;
    background:rgba(255,255,255,1);
    border:1px solid rgba(230,233,240,1);
    border-radius:5px;
    margin:0 auto;
    position: relative;
    text-align: center;
    .avatar{
      display: block;
      width: 590px;
      height:377px;
      object-fit:cover;
    }
  }
  .avatar-uploader-icon{
    font-size:50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }

</style>
